<template>
  <div class="table-head">
    <div class="container flex-1">
      <a-form
        :model="sizeQuery"
        :wrapper-col-props="{ span: 4 }"
        :label-col-props="{ span: 2 }"
        label-align="left"
        auto-label-width
      >
        <a-row :gutter="12" class="border-bottom">
          <a-col :span="6">
            <a-form-item field="width" :label="t['宽度']">
              <a-input-number :min="20" :max="10000" v-model="sizeQuery.width" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="height" :label="t['高度']">
              <a-input-number :min="20" :max="10000" v-model="sizeQuery.height" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <div class="flex gap-3">
              <a-button type="primary" @click="sizeList"> {{ t["查询"] }}</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>

      <div class="my-4">
        <a-row>
          <a-col :span="6">
            <div class="flex gap-3">
              <a-button type="primary" @click="sizeCreate">
                {{ t["新建"] }}
                <template #icon>
                  <IconPlus />
                </template>
              </a-button>
              <a-button @click="sizeList"> {{ t["刷新"] }}</a-button>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { sizeCreate, sizeList } from "../../data/curd";
import { sizeQuery } from "../../data/table";

const t = translate("公共模块");
</script>

<style lang="scss" scoped>
.table-head {
  ::v-deep(.arco-card-header) {
    border: none;
  }
  ::v-deep(.border-bottom) {
    border-bottom: 1px solid #ddd;
  }
}
</style>
